<template>
  <div>
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable">仓库编号</div>
          <el-input v-model="form.like_code" placeholder="请输入"></el-input>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable">仓库名称</div>
          <el-input v-model="form.like_name" placeholder="请输入"></el-input>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable">仓库状态</div>
             <el-select v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
             </el-select>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable"></div>
          <div class="button">
             <el-button type="warning" round @click.native="search">搜索</el-button>
             <el-button round @click.native="reset">重置</el-button>
          </div>
          </div></el-col>
      </el-row>
    </div>
    <div class="content">
      <el-button type="success" round @click.native="$router.push('/add')">新增仓库</el-button>
      <div style=" width: 1227.6px;">
        <el-table
          :data="tableData"
          stripe
          border
          :header-cell-style="{background: '#f9f6ee'}"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="code"
            label="仓库编码"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="仓库名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="type"
            label="仓库类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="location"
            label="省/市/区"
            width="250">
          </el-table-column>
          <el-table-column
            prop="address"
            label="详细地址"
            width="200">
          </el-table-column>
          <el-table-column
            prop="status"
            label="仓库状态"
            width="120">
          </el-table-column>
          <el-table-column
            prop="surface"
            label="仓库面积m²"
            width="120">
          </el-table-column>
          <el-table-column
            prop="includedNum"
            label="库区数量"
            width="120">
          </el-table-column>
          <el-table-column
            prop="personName"
            label="负责人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            width="120">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="250">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-button class="fontOperateButton" @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button class="fontOperateButton" @click="enableClick(scope.row)" type="text" size="small">{{scope.row.status==='停用'?'启用':'停用'}}</el-button>
              <el-button class="fontOperateButton" @click="delClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="BasePagination">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="fenye.current"
              :page-sizes="['全部', 2, 3, 4]"
              :page-size="fenye.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {warehouse,delhouse,puthouse,search } from '@/yuanfeng/Warehouse'
export default {
  namespaced: true,
  async created(){
    const {data} = await warehouse()
    // console.log(data.data.records);
   for (let i = 0; i < data.data.records.length; i++) {
      if (data.data.records[i].type=='ZZ') {
      data.data.records[i].type='中转仓'
    }else if(data.data.records[i].type=='JG'){
      data.data.records[i].type='加工仓'
    }else if(data.data.records[i].type=='LC'){
      data.data.records[i].type='冷藏仓'
    }else if(data.data.records[i].type=='CB'){
      data.data.records[i].type='储备仓'
    }

    if (data.data.records[i].status===1) {
      data.data.records[i].status='启用'
    }else{
      data.data.records[i].status='停用'
    }
   }
    this.tableData = [...data.data.records]
    console.log(this.tableData);
    this.total = data.data.records.length
  },
  data(){
    return{
       form:{
          // 输入框
        like_code: '',
        like_name: '',

        // 多选框的值
        status: '',
       },
       // 多选框
         options: [{
          value: 0,
          label: '停用'
        }, {
          value: 1,
          label: '启用'
        }],
        // 表格
        tableData: [{
          number: '2016-05-02',
          code: '王小虎',
          name: '上海',
          type: '普陀区',
          location: '上海市普陀区金沙江路 1518 弄',
          address: 200333,
          status:1,
          surface:'66',
          includedNum:'45',
          personName:'卢本伟',
          phone:1354354,
          updateTime:'2022-12-01'

        }],
        // 分页
        fenye:{
          current: 1,
          size:1
        },
        total:0,

    }
  },
    methods: {
      reset(){
        this.form.like_code= ''
        this.form.like_name=''
        this.form.status=''
      },
      async search(){
        console.log('搜索');
        console.log(this.form);
         const {data} = await search(this.form)
         this.tableData=[...data.data.records]
    // console.log(data.data.records);
   for (let i = 0; i < data.data.records.length; i++) {
      if (data.data.records[i].type=='ZZ') {
      data.data.records[i].type='中转仓'
    }else if(data.data.records[i].type=='JG'){
      data.data.records[i].type='加工仓'
    }else if(data.data.records[i].type=='LC'){
      data.data.records[i].type='冷藏仓'
    }else if(data.data.records[i].type=='CB'){
      data.data.records[i].type='储备仓'
    }

    if (data.data.records[i].status===1) {
      data.data.records[i].status='启用'
    }else{
      data.data.records[i].status='停用'
    }
   }
    this.tableData = [...data.data.records]
    console.log(this.tableData);
      },
      editClick(row) {
        console.log(row);
        this.$router.push('add')
      },
      async enableClick(row) {
        console.log(row);
        if (row.status==='停用') {
          row.status='启用'
          const res = await puthouse({id:row.id,status:1})
        console.log(res);
        }else if(row.status==='启用'){
          row.status='停用'
          const res = await puthouse({id:row.id,status:0})
        console.log(res);
        }

      },
      // 删除
      async delClick(row){
        console.log(row.id);
        const res = await delhouse(row.id)
        console.log(res);
         const {data} = await warehouse()
    // console.log(data.data.records);
   for (let i = 0; i < data.data.records.length; i++) {
      if (data.data.records[i].type=='ZZ') {
      data.data.records[i].type='中转仓'
    }else if(data.data.records[i].type=='JG'){
      data.data.records[i].type='加工仓'
    }else if(data.data.records[i].type=='LC'){
      data.data.records[i].type='冷藏仓'
    }else if(data.data.records[i].type=='CB'){
      data.data.records[i].type='储备仓'
    }

    if (data.data.records[i].status===1) {
      data.data.records[i].status='启用'
    }else{
      data.data.records[i].status='停用'
    }
   }
    this.tableData = [...data.data.records]
    console.log(this.tableData);
    this.total = data.data.records.length
      },
      // 分页的
      async handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        // console.log(this.pagesize);
         this.fenye.size = val
        //  console.log('kkk'+this.size);
            const {data} =  await warehouse({size:val})
            // console.log(res);
    console.log(data.data.records);
   for (let i = 0; i < data.data.records.length; i++) {
      if (data.data.records[i].type=='ZZ') {
      data.data.records[i].type='中转仓'
    }else if(data.data.records[i].type=='JG'){
      data.data.records[i].type='加工仓'
    }else if(data.data.records[i].type=='LC'){
      data.data.records[i].type='冷藏仓'
    }else if(data.data.records[i].type=='CB'){
      data.data.records[i].type='储备仓'
    }

    if (data.data.records[i].status===1) {
      data.data.records[i].status='启用'
    }else{
      data.data.records[i].status='停用'
    }
   }
    this.tableData = [...data.data.records]
    console.log(this.tableData);

      },
      async handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.fenye.current = val
        const {data} =  await warehouse({current:val,size:this.fenye.size})
        for (let i = 0; i < data.data.records.length; i++) {
      if (data.data.records[i].type=='ZZ') {
      data.data.records[i].type='中转仓'
    }else if(data.data.records[i].type=='JG'){
      data.data.records[i].type='加工仓'
    }else if(data.data.records[i].type=='LC'){
      data.data.records[i].type='冷藏仓'
    }else if(data.data.records[i].type=='CB'){
      data.data.records[i].type='储备仓'
    }

    if (data.data.records[i].status===1) {
      data.data.records[i].status='启用'
    }else{
      data.data.records[i].status='停用'
    }
   }
    this.tableData = [...data.data.records]
    console.log(this.tableData);
      },
    },
}
</script>

<style lang="less" scoped>
.head{
    width: 1230px;
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgba(144,142,142,.17);
    padding: 30px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .lable{
      margin-bottom: 10px;
      height: 18px;
      font-size: 12px;
      color: #887e7e;
      font-weight: 500;
    }
    /deep/ .el-input__inner{
      width: 277.5px;
      background: #f8f5f5;
      border-radius: 6px;
      border: 1px solid transparent;
      &:hover {
        border: 1px solid #ffb200;
      }
    }
    .lable{
      width: 269.4px;
      height: 18px;
      margin-bottom: 10px;
      height: 18px;
    }
    .button{
      width: 180px;
      height: 40px;
      float: right;
      /deep/ .el-button--warning{
        margin-right: 20px;
        background: #ffb200;
        color: #332929;
        width: 80px;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        padding: 1px 6px;
        box-sizing: border-box;
    }
      /deep/ .el-button--default{
        background: #f8f5f5;
        width: 80px;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        margin-left: 0;
        padding: 1px 6px;
        &:hover{
          background: #ffb200;
        }
    }
    }

}
.content{
  width: 1227.6px;
  background: #fff;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 0 6px 0 rgba(144,142,142,.17);
  /deep/ .el-button--success{
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #00be76;
    color: #fff;
    width: 108px;
    height: 40px;
    border-radius: 20px;
    border: 0;
    font-size: 14px;
    padding: 1px 6px;
    box-sizing: border-box;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    padding-left: 26px;
    padding-right: 26px;
  }
  /deep/ .el-table__row.hover-row{
      td {
        background: #fff6e2 !important;
      }
  }
  /deep/ .el-table__row--striped {
      td{
        background-color: #fdfcf9;
      }
  }
  /deep/ .el-table__header-wrapper{
    tr{
      background-color: #f9f6ee;
    }
  }
  .BasePagination{
    width: 1227.6px;
    height: 84px;
    margin: 0 auto;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 34px;
    box-sizing: border-box;
    /deep/ .el-input__inner{
      background-color: #f8f5f5;
    }
    /deep/ .number{
      background-color: #fff;
    }
    /deep/ .active{
      color:#ffb200
    }
  }
  .fontOperateButton{
      color:#ffb200
  }
  /deep/ .cell{
    font-weight: normal;
  }
}
</style>
